.scrollbar__(@width: 8px, @height: 8px) {
    @scrollbar-color: rgba(255, 255, 255, 0.8);
    // @scrollbar-color: rgba(0,0,0, 0.8);
    @scrollbar-bg-color: none;
    &::-webkit-scrollbar {
        width: @width;
        height: @height;
        background-color: @scrollbar-bg-color;
        border-radius: 100px;
    }

    &::-webkit-scrollbar-thumb {
        background-color: fade(@scrollbar-color, 20%);
        border-radius: 100px;
    }

    &::-webkit-scrollbar-corner {
        background: none;
    }

    &:hover {
        // width: @scrollbar-width;
        // &::-webkit-scrollbar {
        //     width: @scrollbar-width;
        // }
        &::-webkit-scrollbar-thumb {
            background-color: fade(@scrollbar-color, 30%);
        }
    }
}
// .scrollbar{
//     .scrollbar();
//     // border:1px solid #f00;
// }
.card-bg {
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0px 0px 20px rgba(255, 255, 255, 0.2);
    position: relative;
    padding: 4px;
    box-sizing: border-box;
    &::before,
    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        height: 20px;
    }
    &::before {
        border-left: 1px solid @primaryColor;
        border-top: 1px solid @primaryColor;
    }
    &::after {
        width: 1px;
        height: 20px;
        // left:-1px;
    }
    & > .layui-card-header {
        // height: auto;
    }
}
.box1(@size: 10px,@color:#fff) {
    @fixCorner:-1px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    &::before,
    &::after {
        content: "";
        position: absolute;
        width: @size;
        height: @size;
    }
    &::before {
        top: @fixCorner;
        left: @fixCorner;
        border-left: 1px solid @color;
        border-top: 1px solid @color;
    }
    &::after {
        bottom: @fixCorner;
        right: @fixCorner;
        border-right: 1px solid @color;
        border-bottom: 1px solid @color;
    }
}
.borderBg1 {
    // width: 400px;
    // height: 115px;
    // border: 2rem double orange;
    // border-image: url("@{imgUrl}/border_bg1.png") 27 round;
    @borderWidth:70;
    border-image-source: url("@{imgUrl}/border_bg1.png");
    // border-image-slice: @borderWidth fill;
    border-image-slice: 20 60 20 20 fill;
    // border-width: ~"@{borderWidth}px";
    border-width: 20px 60px 20px 20px;
    border-top-right-image:none;
    border-style: solid;
    background-clip: padding-box;
    position: relative;
    &> div{
        position: absolute;
        color:#fff;
        // background: #f00;
        inset:0 -60px 0 0;
        // margin:0 -60px 0 0;
        // width: 100%;
    }
}
.menu1{
    & > ul {
        display: flex;
        & > li {
            background: url("@{imgUrl}/menu_btn_bg.png") #f00 center -1px no-repeat;
            margin: 4px 8px;
            height: 40px;
            display: flex;
            background-size: auto 42px;
            overflow: hidden;
            &::before,
            &::after {
                content: "";
                background: url("@{imgUrl}/menu_btn_bg.png") left top no-repeat;
                width: 8px;
            }
            &::after {
                width: 12px;
                background-position: right top;
            }
            & > a {
                color: #fff;
                display: flex;
                align-items: center;
                padding: 0 20px;
            }
            &:hover,
            &.hover {
                filter: brightness(1.5);
                & > a {
                    color: rgb(226, 206, 25);
                }
            }
        }
    }
}